<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Typography 排版</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<!-- <script src="../static/js/antd.min.open.js"></script> -->
	<script src="../static/js/icons-vue.js"></script>
</head>
<body>

<div id="app">
	<a-divider class="a-divi" orientation="left">基本用法</a-divider><!-- =============================================================== -->
	<p class="desc">展示文档样例。</p>
	<a-typography>
		<a-typography-title>介绍</a-typography-title>
		<a-typography-paragraph>
			蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。
			同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
		</a-typography-paragraph>
		<a-typography-paragraph>
			经过大量的项目实践和总结，以设计语言Ant Design为背景应用程序，由Ant UED团队进行改进，该团队旨在
			<a-typography-text strong>
				统一内部后台项目的用户界面规范，降低不必要的设计成本差异与实施，解放设计资源前端开发。
			</a-typography-text>
		</a-typography-paragraph>
		
		<a-typography-title :level="2">指导方针和资源</a-typography-title>
		<a-typography-paragraph>
			我们提供一系列的设计原则、实用模式和高品质的设计资源
			（ <a-typography-text code>Sketch</a-typography-text> 和 <a-typography-text code>Axure</a-typography-text> ），帮助人们漂亮高效地创建产品原型。
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			<ul>
				<li>
					<a-typography-link href="https://www.baidu.com/">百度一下</a-typography-link>
				</li>
			</ul>
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			按
			<a-typography-text keyboard>Esc</a-typography-text>
			退出...
		</a-typography-paragraph>
	
		<a-divider></a-divider>
	
		<a-typography-title>介绍</a-typography-title>
		<a-typography-paragraph>
			蚂蚁的企业级产品是一个庞大且复杂的体系。这类产品不仅量级巨大且功能复杂，而且变动和并发频繁，常常需要设计与开发能够快速的做出响应。
			同时这类产品中有存在很多类似的页面以及组件，可以通过抽象得到一些稳定且高复用性的内容。
		</a-typography-paragraph>
		<a-typography-paragraph>
			随着商业化的趋势，越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标，我们（蚂蚁金服体验技术部）经过大量的项目实践和总结，
			逐步打磨出一个服务于企业级产品的设计体系Ant Design。基于
			<a-typography-text mark>『确定』和『自然』</a-typography-text>
			的设计价值观，通过模块化的解决方案，降低冗余的生产成本，让设计者专注于
			<a-typography-text strong>更好的用户体验</a-typography-text> 。
		</a-typography-paragraph>
		
		<a-typography-title :level="2">设计资源</a-typography-title>
		<a-typography-paragraph>
			我们提供完善的设计原则、最佳实践和设计资源文件
			（ <a-typography-text code>Sketch</a-typography-text> 和 <a-typography-text code>Axure</a-typography-text> ），
			来帮助业务快速设计出高质量的产品原型。
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			<ul>
				<li>
					<a-typography-link href="https://www.baidu.com/">设计资源</a-typography-link>
				</li>
			</ul>
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			<blockquote>{{ blockContent }}</blockquote>
			<pre>{{ blockContent }}</pre>
		</a-typography-paragraph>
	
		<a-typography-paragraph>
			按
			<a-typography-text keyboard>Esc</a-typography-text>
			键退出阅读……
		</a-typography-paragraph>
	</a-typography>
	
	
	<a-divider class="a-divi" orientation="left">省略号</a-divider><!-- =============================================================== -->
	<p class="desc">多行文本省略。你可以通过 tooltip 属性配置省略展示内容，大量文本时推荐优先使用 expandable。</p>
	<a-switch v-model:checked="ellipsis" ></a-switch>
	<a-typography-paragraph :ellipsis="ellipsis" content="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team."></a-typography-paragraph>
	
	<a-typography-paragraph :ellipsis="ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false" 
		content="Ant Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team. Ant
		Design, a design language for background applications, is refined by Ant UED Team."></a-typography-paragraph>
	
	<hr> 
	<a-typography-text :style="ellipsis ? { width: '100px' } : {}" :ellipsis="ellipsis ? { tooltip: 'I am ellipsis now!' } : false"
		content="Ant Design, a design language for background applications, is refined by Ant UED Team."></a-typography-text>
	<br>
	<a-typography-text :style="ellipsis ? { width: '100px' } : {}" :ellipsis="ret_ellipsis0"
		content="Ant Design, a design language for background applications, is refined by Ant UED Team."></a-typography-text>
	
	<a-divider class="a-divi" orientation="left">可交互</a-divider><!-- =============================================================== -->
	<p class="desc">提供可编辑和可复制等额外的交互能力。</p>
	<a-typography-paragraph ref="myParRef" v-model:content="editableStr" :editable="ret_editable"></a-typography-paragraph>
	<p>不知道为什么，这里的插槽没有生效------<edit class="aut-icon"></edit></p>
	<a-typography-paragraph :content="customIconStr" editable>
		<template #EditableIcon>
			<edit class="aut-icon"></edit>
		</template>
		<template #editableTooltip>click to edit text</template>
	</a-typography-paragraph>
	
	Trigger edit with:&nbsp;&nbsp;
	<a-radio-group v-model:value="stateToRadio" @change="radioToState()">
		<a-radio value="icon">icon</a-radio>
		<a-radio value="text">text</a-radio>
		<a-radio value="both">both</a-radio>
	</a-radio-group>
	<a-typography-paragraph v-model:content="clickTriggerStr" :editable="{ triggerType: chooseTrigger }">
		<template #editableTooltip>click to edit text</template>
	</a-typography-paragraph>
	
	<a-typography-paragraph v-model:content="customEnterIconStr" editable>
		<template #editableIcon>
			<HighlightOutlined />
		</template>
		<template #editableTooltip>click to edit text</template>
		<template #editableEnterIcon="{ className }">
			<CheckOutlined :class="className" />
		</template>
	</a-typography-paragraph>
	
	<a-typography-paragraph v-model:content="noEnterIconStr" editable>
		<template #editableIcon>
			<HighlightOutlined />
		</template>
		<template #editableTooltip>click to edit text</template>
		<template #editableEnterIcon>{{ null }}</template>
	</a-typography-paragraph>
	
	<a-typography-paragraph v-model:content="hideTooltipStr" :editable="{ tooltip: false }"></a-typography-paragraph>
	
	<a-typography-paragraph v-model:content="lengthLimitedStr"
		:editable="{ maxlength: 50, autoSize: { maxRows: 5, minRows: 3 } }"></a-typography-paragraph>
	
	<a-typography-paragraph copyable>复制此文字。</a-typography-paragraph>
	<a-typography-paragraph :copyable="{ text: '这段文字被复制', onCopy: copyed }">复制指定文字，执行回调。</a-typography-paragraph>
	<a-typography-paragraph copyable content="自定义复制图标并替换工具提示文本（但是没生效）">
		<template #copyableIcon="{ copied }">
			<!-- <edit class="aut-icon"></edit> -->
			<edit v-if="!copied" key="copy-icon"></edit>
			<search v-else key="copied-icon"></search>
		</template>
		<template #copyableTooltip="{ copied }">
			<span v-if="!copied" key="copy-tooltip">click here</span>
			<span v-else key="copied-tooltip">you clicked!!</span>
		</template>
	</a-typography-paragraph>
	<a-typography-paragraph :copyable="{ tooltip: false }">隐藏“复制”工具提示。</a-typography-paragraph>
	
	
	<a-divider class="a-divi" orientation="left">文本与超链接组件</a-divider><!-- =============================================================== -->
	<p class="desc">内置不同样式的文本以及超链接组件。</p>
	<a-space direction="vertical">
		<a-typography-text>Ant Design Vue (default)</a-typography-text>
		<a-typography-text type="secondary">Ant Design Vue (secondary)</a-typography-text>
		<a-typography-text type="success">Ant Design Vue (success)</a-typography-text>
		<a-typography-text type="warning">Ant Design Vue (warning)</a-typography-text>
		<a-typography-text type="danger">Ant Design Vue (danger)</a-typography-text>
		<a-typography-text disabled>Ant Design Vue (disabled)</a-typography-text>
		<a-typography-text :mark="is_mark">Ant Design Vue (mark)</a-typography-text>
		<a-typography-text code>Ant Design Vue (code)</a-typography-text>
		<a-typography-text keyboard>Ant Design Vue (keyboard)</a-typography-text>
		<a-typography-text underline>Ant Design Vue (underline)</a-typography-text>
		<a-typography-text delete>Ant Design Vue (delete)</a-typography-text>
		<a-typography-text strong>Ant Design Vue (strong)</a-typography-text>
		<a-typography-link href="https://www.baidu.com" target="_blank">To Baidu(Link)</a-typography-link>
	</a-space>
	
	
	<a-divider class="a-divi" orientation="left">后缀</a-divider><!-- =============================================================== -->
	<p class="desc">添加后缀的省略。</p>
	<a-slider v-model:value="rows" :min="1" :max="10"></a-slider>
	<a-typography-paragraph :ellipsis="ret_ellipsis1" :title="`${article}--William Shakespeare`" :content="article"></a-typography-paragraph>
	
	<a-slider v-model:value="rows2" :min="1" :max="10"></a-slider>
	<div style="width: 90%;">
		<a-typography-paragraph :ellipsis="ret_ellipsis2" :title="`${article}--William Shakespeare`" :content="article"></a-typography-paragraph>
	</div>
	<a-button type="link" @click="typExpand()">展开>>9</a-button>
	<a-button type="link" @click="typRetract()">收起<<</a-button>
	
	
	<a-divider class="a-divi" orientation="left">标题组件</a-divider><!-- =============================================================== -->
	<p class="desc">展示不同级别的标题。</p>
	<a-typography-title>h1. Ant Design Vue</a-typography-title>
	<a-typography-title :level="2">h2. Ant Design Vue</a-typography-title>
	<a-typography-title :level="3">h3. Ant Design Vue</a-typography-title>
	<a-typography-title :level="4">h4. Ant Design Vue</a-typography-title>
	<a-typography-title :level="5">h5. Ant Design Vue</a-typography-title>
	
	
	<a-divider class="a-divi" orientation="left">API#</a-divider><!-- =============================================================== -->
API#
#
Typography.Text #
参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false	
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string	-	
copyable	是否可拷贝，为对象时可进行各种自定义	boolean | copyable	false	copyable
delete	添加删除线样式	boolean	false	
disabled	禁用文本	boolean	false	
editable	是否可编辑，为对象时可对编辑进行控制	boolean | editable	false	editable
ellipsis	自动溢出省略	boolean	false	
keyboard	添加键盘样式	boolean	false	
mark	添加标记样式	boolean	false	
strong	是否加粗	boolean	false	
type	文本类型	secondary | success | warning | danger	-	
underline	添加下划线样式	boolean	false	

Typography.Title #
参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false	
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string	-	
copyable	是否可拷贝，为对象时可进行各种自定义	boolean | copyable	false	copyable
delete	添加删除线样式	boolean	false	
disabled	禁用文本	boolean	false	
editable	是否可编辑，为对象时可对编辑进行控制	boolean | editable	false	editable
ellipsis	自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等	boolean | ellipsis	false	ellipsis
level	重要程度，相当于 h1、h2、h3、h4、h5	number: 1, 2, 3, 4, 5	1	
mark	添加标记样式	boolean	false	
type	文本类型	secondary | success | warning | danger	-	
underline	添加下划线样式	boolean	false	

Typography.Paragraph #
参数	说明	类型	默认值	版本
code	添加代码样式	boolean	false	
content(v-model)	当使用 ellipsis 或 editable 时，使用 content 代替 children	string	-	
copyable	是否可拷贝，为对象时可进行各种自定义	boolean | copyable	false	copyable
delete	添加删除线样式	boolean	false	
disabled	禁用文本	boolean	false	
editable	是否可编辑，为对象时可对编辑进行控制	boolean | editable	false	editable
ellipsis	自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等	boolean | ellipsis	false	ellipsis
mark	添加标记样式	boolean	false	
strong	是否加粗	boolean	false	
type	文本类型	secondary | success | warning | danger	-	
underline	添加下划线样式	boolean	false	

slots #
名称	说明	参数	默认值	版本
copyableIcon	自定义拷贝图标	{ copied: boolean }	copied ? 《CheckOutlined /》 : 《CopyOutlined /》	
copyableTooltip	自定义提示文案，当 copyable.tooltip = false 时关闭	{ copied: boolean }	copied ? '复制成功' : '复制'	
editableIcon	自定义编辑图标	-	《EditOutlined /》	
editableTooltip	自定义提示文本，当 editable.tooltip = false 时关闭	-	编辑	
ellipsisSymbol	自定义展开描述文案	-	-	
ellipsisTooltip	省略时，展示提示信息	-	-	
enterEnterIcon	在编辑段中自定义“enter”图标	{className: string}	《EnterOutlined /》	3.0

copyable #
  {
    text: string,
    onCopy: function(event),
    tooltip: false,
  }
参数	说明	类型	默认值	版本
text	拷贝到剪切板里的文本	string	-	
tooltip	是否展示提示文本	boolean	true	
onCopy	拷贝成功的回调函数	function	-	

editable #
  {
    tooltip: boolean,
    editing: boolean,
    maxlength: number,
    autoSize: boolean | { minRows: number, maxRows: number },
    onStart: function,
    onChange: function(string),
    onCancel: function,
    onEnd: function,
    triggerType: ('icon' | 'text')[],
  }
参数	说明	类型	默认值	版本
autoSize	自动 resize 文本域	boolean | { minRows: number, maxRows: number }	-	
editing	控制是否是编辑中状态	boolean	false	
maxlength	编辑中文本域最大长度	number	-	
tooltip	是否展示提示文本	boolean	true	
triggerType	编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏）	Array《icon|text》	[icon]	
onCancel	按 ESC 退出编辑状态时触发	function	-	
onChange	文本域编辑时触发	function(event)	-	
onEnd	按 ENTER 结束编辑状态时触发	function	-	
onStart	进入编辑中状态时触发	function	-	

ellipsis #
  {
    rows: number,
    expandable: boolean,
    suffix: string,
    symbol: string,
    tooltip: boolean,
    onExpand: function(event),
    onEllipsis: function(ellipsis),
  }
参数	说明	类型	默认值	版本
expandable	是否可展开	boolean	-	
rows	最多显示的行数	number	-	
suffix	自定义省略内容后缀	string	-	
symbol	自定义展开描述文案	string	展开	
tooltip	省略时，展示提示信息	boolean | string	-	
onEllipsis	触发省略时的回调	function(ellipsis)	-	
onExpand	点击展开时的回调	function(event)	-	

</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		blockContent: 'AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。',
		ellipsis: true,
		
		editableStr: '这是一个可编辑的文本【触发各种回调函数】。',
		customIconStr: '自定义编辑图标并替换工具提示文本。',
		hideTooltipStr: '隐藏“编辑”工具提示。',
		lengthLimitedStr: '这是一个长度有限的可编辑文本。',
		clickTriggerStr: '文本或图标作为触发器-单击开始编辑。',
		customEnterIconStr: '在编辑字段中具有自定义输入图标的可编辑文本。99',
		noEnterIconStr: '可编辑文本，在编辑字段中没有输入图标。',
		
		stateToRadio: 'icon',
		chooseTrigger: ['icon'],
		
		is_mark: true,
		
		rows: 1,
		rows2: 1,
		article: `那是一年前，汪淼是“中华二号”高能加速器项目纳米构件部分的负责人。那天下午在良湘的工地上，一次短暂的休息中，他突然被眼前的一幅构图吸引了。作为一名风景摄影爱好者，现实的场景经常在他眼中形成一幅幅艺术构图。构图的主体就是他们正在安装的超导线圈，那线圈有三层楼高，安装到一半，看上去是一个由巨大的金属块和乱麻般的超低温制冷剂管道组成的怪物，仿佛一堆大工业时代的垃圾，显示出一种非人性的技术的冷酷和钢铁的野蛮。就在这金属巨怪前面，出现了一个年轻女性纤细的身影。这构图的光线分布也很绝：金属巨怪淹没在临时施工顶棚的阴影里，更透出那冷峻、粗糙的质感；而一束夕阳金色的光，透过顶棚的孔洞正好投在那个纤细的身影上，柔和的暖光照着她那柔顺的头发，照着工作服领口上白皙的脖颈，看上去就像一场狂暴的雷雨后，巨大的金属废墟上开出了一朵娇柔的花……`,
	
	
	}
},
mounted: function(){
	//实例挂载完成后被调用
	// console.log("实例挂载完成后被调用");
	this.$nextTick(function () {
		// 仅在整个视图都被渲染之后才会运行的代码
		// console.log("仅在整个视图都被渲染之后才会运行的代码");
		this.$refs.myParRef.focus();		//让myParRef组件自动获取焦点，但没生效
		
	});
	// console.log("实例挂载完成后被调用2");
},
computed:{
	ret_ellipsis0(){
		if(this.ellipsis){
			return {
				tooltip: 'I am ellipsis now!22'
			};
		}else{
			return false;
		}
	},
	ret_editable(){
		return {
			// tooltip: true,
			triggerType: ['text','icon'],
			onCancel: this.editOnCancel(),
			onChange: this.editOnChange(),
			onEnd: this.editOnEnd(),
			onStart: this.editOnStart(),
			
		};
	},
	ret_ellipsis1(){
		return {
			rows: this.rows,
			expandable: true,
			suffix: '...',
			symbol: '展开>>',
			tooltip: '省略时，展示提示信息',
			// onEllipsis: (ellipsis) => {
			// 	console.log('Ellipsis changed:', ellipsis);
			// },
			onEllipsis: this.myOnEllipsis(),
			onExpand:(e)=>{
				console.log('展开了：', e);
			},
		};
	},
	ret_ellipsis2(){
		return {
			rows: this.rows2,
			// expandable: true,
			suffix: '...',
			symbol: '展开>>',
			tooltip: '省略时，展示提示信息',
			// onEllipsis: (ellipsis) => {
			// 	console.log('Ellipsis changed:', ellipsis);
			// },
			onEllipsis: this.myOnEllipsis(),
			onExpand:(e)=>{
				console.log('展开了：', e);
			},
		};
	},
	copyed(){
		return function(){
			console.log("一段文字被复制了。。。");
		}
	},
	
	
},
methods:{
	typExpand(){
		//也可以直接等于0
		this.rows2 = 10;
	},
	typRetract(){
		this.rows2 = 1;
	},
	myOnEllipsis(){
		return (ellipsis)=>{
			console.log('Ellipsis changed9999:', ellipsis);
		}
	},
	editOnCancel(){
		let HTIS = this;
		return function(){
			console.log("按 ESC 退出编辑状态时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	editOnChange(){
		let HTIS = this;
		return function(){
			console.log("文本域编辑时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	editOnEnd(){
		let HTIS = this;
		return function(){
			console.log("按 ENTER 结束编辑状态时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	editOnStart(){
		let HTIS = this;
		return function(){
			console.log("进入编辑中状态时触发");
			console.log("editableStr：" + HTIS.editableStr);
		}
	},
	
	radioToState(){
		if(this.stateToRadio == 'text'){
			this.chooseTrigger = ['text'];
		}else if(this.stateToRadio == 'icon'){
			this.chooseTrigger = ['icon'];
		}else{
			this.chooseTrigger = ['text', 'icon'];
		}
		// console.log(this.stateToRadio);
		// console.log(this.chooseTrigger);
	},
	
	
},

}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
